<template>
	<view class="changeUrlModel">
		<u-top-tips ref="uTips" :navbar-height="statusBarH" z-index='10'></u-top-tips>
		<u-modal
			v-model="show" 
			content="此操作将会切换应用服务器地址,是否继续？"
			@confirm="confirm"
			@cancel="cancelApi"
			:async-close="true"
			show-cancel-button
			show-confirm-button>
		</u-modal>
		<u-modal 
			v-model="logOutModel" 
			:content="content" 
			:async-close="true" 
			:title-style="{color: 'red'}" 
			@confirm="checkLoginOut" 
			@cancel="cancelLog" 
			:show-cancel-button="true">
		</u-modal>
		<navigationTop navigationTitle="设置" :isBack="true" :isHome="isLogin ? true : false"></navigationTop>
		<!-- 修改请求地址 -->
		<view class="contain">
			<template  v-if="isLogin">
				<navigator :url="'/pages/previewImg/index?src='+$store.state.userInfo.photo" class="advantar" >
					<text style="font-size: 28rpx;">头像</text>
					<view class="advantar-img">
						<image :src="$store.state.userInfo.photo" mode="aspectFit"></image>
					</view>
				</navigator>
				
			</template>
			<u-field
				v-model="form.url"
				label="API地址"
				placeholder="请输入请求API地址"
			>
				<u-button size="mini" slot="right" type="primary" @click="handleClick"  :ripple="true" shape="circle" :disabled="disabled">
					<u-icon name="checkbox-mark" color="#fff" size="28"></u-icon>
				</u-button>
			</u-field>
			<view class="logOut">
				<u-button @click="logout" :ripple="true" :plain="true" type="info" v-if="isLogin" :disabled="logDisabled" :loading="logLoding">退出登录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import navigationTop from "@/components/navigationTop/index.vue";
	import {rpxToPx} from "@/common/utils/index.js";
	export default{
		components:{navigationTop},
		data(){
			return{
				disabled:false,
				logDisabled:false,
				logOutModel:false,
				logLoding:false,
				show:false,
				isLogin:false,
				content:"是否退出登录？",
				// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
				// statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				statusBarH:rpxToPx(150),
				form:{
					url:""
				}
			}
		},
		onLoad(options) {
			this.isLogin = options.isLogin
		},
		methods:{
			chooseImg(){
				uni.chooseImage({
					count:1,
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType:['album'],
					success(res) {
						uni.getImageInfo({
							src:res.tempFilePaths[0],
							success(r) {
								if(r.type == 'gif'){
									return	uni.showToast({
										title:"请勿选择gif图",
										icon:'none'
									})
								}
								uni.navigateTo({
									animationType:"slide-in-bottom",
									// animationDuration:300,
									url:"/pages/clipImage/index?src="+res.tempFilePaths[0]
								})
							}
						})
						
					},
					fail(err) {
						// 取消图片选择
					}
				})
			},
			urlInput(res){
				const {detail} = res;
				this.form.url = detail.value
			},
			// 确认退出
			checkLoginOut(){
				this.requestLogOut()
			},
			logout(){
				this.logOutModel = true;
			},
			// 关闭确认退出
			cancelLog(){
				this.logOutModel = false;
			},
			// 修改api地址
			confirm(){
				this.changeUrl()
			},
			cancelApi(){
				this.show = false;
			},
			handleClick(){
				// const reg = /http[s]{0,1}:\/\/([\w.]+\/?)\S*/
				if(this.form.url == ""){
					return uni.showModal({
						title:'提示',
						content:'API不能为空',
						showCancel:false
					})
				}
				this.show = true;
			},
			// 请求退出
			requestLogOut(){
				this.logLoding = true;
				this.logDisabled = true;
				this.$http.httpRequest({
					url: this.$api.logOut,
					methods:"get"
				}).then((res)=>{
					this.show = false;
					if(!res || res.data.code!==200){
						this.logLoding = false;
						this.logDisabled = false;
						uni.clearStorage();
						return uni.reLaunch({
							url:'/pages/login/login'
						})
					}
					this.$store.dispatch("loginOut").then((r)=>{
						this.logLoding = false;
						this.logDisabled = false;
						uni.showToast({
							title:"退出成功",
							icon:"success"
						})
						uni.reLaunch({
							url:'/pages/login/login'
						})
					}).catch((err)=>{
						uni.reLaunch({
							url:'/pages/login/login'
						})
					});
				}).catch((err)=>{
					uni.clearStorage();
					this.logLoding = false;
					this.show = false;
					this.logDisabled = false;
					uni.reLaunch({
						url:'/pages/login/login'
					})
				})
			},
			changeUrl(){
				this.disabled = true;
				this.$store.dispatch('set_baseApiSync',this.form.url).then((res)=>{
					this.disabled = false;
					this.show = false;
					this.$refs.uTips.show({
						title: '修改成功',
						type: 'success',
						duration: '2300'
					})
				}).catch((err)=>{
					this.disabled = false;
					this.$refs.uTips.show({
						title: '修改失败',
						type: 'error',
						duration: '2300'
					})
				})
			}
		},
		mounted() {
			this.form.url = this.$store.state.baseUrl
		}
	}
</script>

<style scoped lang="scss">
	.changeUrlModel{
		min-height: 100vh;
		position: relative;
		padding-top: calc( 150rpx + 95rpx );
		.contain{
			background-color: rgba($color: #fff, $alpha: .9);
			border-radius: $card-box-radius;
			padding: 30rpx 20rpx 120rpx 20rpx;
			width: $baseWidth;
			margin:  0 auto;
			box-shadow: 0 0 15rpx #999;
			min-height: 500rpx;
			position: relative;
			.advantar{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #e4e7ed;
				padding: 20rpx 30rpx;
				border-radius: 10rpx;
				.advantar-img{
					width: 120rpx;
					height: 120rpx;
					background-color: #fff;
					border-radius: 10rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
						display: block;
					}
				}
			}
			.inputUrl{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.label{
					width: 120rpx;
					font-size: 28rpx;
				}
			}
			.logOut{
				position: absolute;
				width: 100%;
				bottom: 30rpx;
				left: 0;
				padding: 0 30rpx;
			}
		}
	}
</style>
